<template>
    <a-card class="general-card">
      <a-form v-model="checkForm" class="formHeader">
        <a-row justify="start" :gutter="24">
          <a-col class="formHeader-criteria">
            <a-row :gutter="16">
              <a-col span="8">
                <a-form-item label="工单号" label-col-flex="80px">
                  <a-input v-model="checkForm.number" allow-clear/>
                </a-form-item>
              </a-col>
<!--              <a-col span="8">-->
<!--                <a-form-item label="订单号" label-col-flex="80px">-->
<!--                  <a-input v-model="checkForm.orderNumber" allow-clear/>-->
<!--                </a-form-item>-->
<!--              </a-col>-->
              <a-col span="8">
                <a-form-item label="品号" label-col-flex="80px">
                  <a-input v-model="checkForm.itemNo" allow-clear/>
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="工艺编号" label-col-flex="80px">
                  <a-input v-model="checkForm.craft" allow-clear/>
                </a-form-item>
              </a-col>
              <a-col span="8">
                <a-form-item label="员工姓名" label-col-flex="80px">
                  <a-input v-model="checkForm.name" allow-clear/>
                </a-form-item>
              </a-col>
<!--              <a-col span="8">-->
<!--                <a-form-item label="工作中心" label-col-flex="80px">-->
<!--                  <a-input v-model="checkForm.workCenter" allow-clear/>-->
<!--                </a-form-item>-->
<!--              </a-col>-->
              <a-col span="8">
                <a-form-item label="生产时间" label-col-flex="80px">
                  <a-range-picker v-model="timeRange" @change="changeTime"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-col>
          <a-col class="formHeader-btn">
            <a-space direction="vertical" :size="20">
              <a-button type="primary" @click="search">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button @click="reset">
                <template #icon>
                  <icon-loop />
                </template>
                <template #default>重置</template>
              </a-button>
              <a-button @click="outExcleFun" type="primary" status="success">
                <template #icon>
                  <icon-loop />
                </template>
                <template #default>导出Excel</template>
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>

      <!-- 用户显示区域 -->
      <div class="user-area">
        <vxe-table
            ref="tableRef"
            :data="data"
            size="mini"
            height="100%"
            :loading="loadingFlag"
            :row-config="{ isCurrent: true, keyField: 'uuid', isHover: true }"
            :column-config="{ isCurrent: true, resizable: true }"
            :checkbox-config="{ checkRowKeys: defaultSelecteRowKeys, highlight: true }"
            :edit-config="{ trigger: 'click', mode: 'cell' }"
            stripe
            border
          >
            <vxe-column field="TE001" title="报工单号"  show-overflow align="center" min-width="180" sortable>
              <template #default="{ row }"> {{ row.TE001 }}</template>
            </vxe-column>
            <vxe-column field="TE006" title="工单号"  show-overflow align="center" min-width="150" sortable>
              <template #default="{ row }"> {{ row.TE006 }}</template>
            </vxe-column>
            <vxe-column field="TE023" title="报工时间"  show-overflow align="center" min-width="130" sortable>
              <template #default="{ row }"> {{ row.TE023 }}</template>
            </vxe-column>
            <vxe-column field="TE004" title="人员编号"  show-overflow align="center" min-width="100" sortable>
              <template #default="{ row }"> {{ row.TE004 }}</template>
            </vxe-column>
            <vxe-column field="UDF07" title="人员名称"  align="center" min-width="100" sortable>
              <template #default="{ row }"> {{ row.UDF07 }}</template>
            </vxe-column>
            <vxe-column field="TE017" title="品号"  show-overflow align="center" min-width="100" sortable>
              <template #default="{ row }"> {{ row.TE017 }}</template>
            </vxe-column>
            <vxe-column field="TE018" title="品名"  show-overflow align="center" min-width="150" sortable>
              <template #default="{ row }"> {{ row.TE018 }}</template>
            </vxe-column>
            <vxe-column field="TE019" title="规格"  show-overflow align="center" min-width="170" sortable>
              <template #default="{ row }"> {{ row.TE019 }}</template>
            </vxe-column>
            <vxe-column field="TE020" title="单位"  align="center" min-width="100" sortable>
              <template #default="{ row }"> {{ row.TE020 }}</template>
            </vxe-column>
            <vxe-column field="TE009" title="工艺编号"  show-overflow align="center" min-width="100" sortable>
              <template #default="{ row }"> {{ row.TE009 }}</template>
            </vxe-column>
          <vxe-column field="name" title="工艺名称"  show-overflow align="center" min-width="100" sortable>
            <template #default="{ row }"> {{ row.name }}</template>
          </vxe-column>
          <vxe-column field="sonId" title="子工艺编号"  show-overflow align="center" min-width="100" sortable>
            <template #default="{ row }"> {{ row.sonId }}</template>
          </vxe-column>
          <vxe-column field="sonName" title="子工艺名称"  show-overflow align="center" min-width="100" sortable>
            <template #default="{ row }"> {{ row.sonName }}</template>
          </vxe-column>
            <vxe-column field="UDF52" title="废料"  show-overflow align="center" min-width="100" sortable>
              <template #default="{ row }"> {{ row.UDF52 }}</template>
            </vxe-column>
            <vxe-column field="UDF51" title="工废"  align="center" min-width="100" sortable>
              <template #default="{ row }"> {{ row.UDF51 }}</template>
            </vxe-column>
            <vxe-column field="UDF53" title="不良"  show-overflow align="center" min-width="100" sortable>
              <template #default="{ row }"> {{ row.UDF53 }}</template>
            </vxe-column>
            <vxe-column field="TE015" title="备注"  show-overflow align="center" min-width="200" sortable>
              <template #default="{ row }"> {{ row.TE015 }} </template>
            </vxe-column>
<!--            <vxe-column field="orderNumber" title="订单号"  show-overflow align="center" min-width="100" sortable>-->
<!--              <template #default="{ row }"> {{ row.UDF04 }} </template>-->
<!--            </vxe-column>-->
            <vxe-column field="UDF57" title="订单数量"  show-overflow align="center" min-width="100" sortable>
              <template #default="{ row }"> {{ row.UDF57 }} </template>
            </vxe-column>
            <vxe-column field="TE011" title="报工数量"  show-overflow align="center" min-width="100" sortable>
              <template #default="{ row }"> {{ row.TE011 }} </template>
            </vxe-column>
            <vxe-column field="purchasePrice" title="操作" show-overflow align="center" fixed="right" width="150">
              <template #default="{ row, rowIndex }">
                <a-space>
                  <a-button type="primary" size="mini" @click="toDetail(row)">查看</a-button>
                  <a-button v-can-delete type="primary" size="mini" status="danger" @click="del(row, rowIndex)">删除</a-button>
                </a-space>
              </template>
            </vxe-column>
          </vxe-table>
      </div>
      <vxe-pager
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :total="pagination.total"
          :layouts="['Home', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'End', 'Sizes', 'FullJump', 'Total']"
          @page-change="getTable">
      </vxe-pager>

      <!-- 提示确认删除 -->
      <a-modal v-model:visible="delVisible" title-align="center" @ok="delHandleOk" @cancel="delVisible=false">
        <template #title> 删除提示 </template>
        <div>您确定要删除吗</div>
      </a-modal>
    </a-card>
  </template>

  <script lang="ts">
  import { toRefs } from 'vue';
  import importConfig from './reportingWorkModel.ts';
  import formButtonGroup from '@com/formButtonGroup/formButtonGroup.vue';

  export default {
    components: {
      formButtonGroup,
    },
    setup() {
      const {
        base,
        getTable,
        reset,
        onChange,
        outExcleFun,
        toDetail,
        del,
        delHandleOk,
        search,
        changeTime,
      } = importConfig();

      return {
        ...toRefs(base),
        getTable,
        reset,
        onChange,
        outExcleFun,
        toDetail,
        del,
        delHandleOk,
        search,
        changeTime,
      };
    },
  };
  </script>

  <style lang="less" scoped>
  .formHeader {
    &-buttom {
      padding: 10px 0px;
      display: flex;
      align-items: flex-end;
      align-content: flex-end;
      justify-content: flex-end;
    }
    &-criteria {
      flex: 1 1 0;
      &-postizz {
        display: flex;
        justify-content: flex-end;
        margin-top: 25px;
      }
    }

    &-btn {
      border-left: 1px solid #ddd;
      flex: 0 0 86px;
      text-align: right;

    }
  }

  :deep(.arco-divider-horizontal) {
    margin: 10px 0;
  }

  .add-user-btn {
    display: flex;
  }

  .user-area {
    margin-top: 20px;
    height: calc(100vh - 405px);

    :deep(.arco-table-td-content) {
      text-align: center;
    }
  }
  </style>
